<template>
  <el-col :span="widthCol" class="container-left">
    <div class="title">青岛市建设项目情况分析</div>
    <el-row>
      <el-col :span="7">
        <div class="panel-left-1 common-panpel">
          <div class="angle angle-left-top"></div>
          <div class="angle angle-left-bottom"></div>
          <div class="angle angle-right-top"></div>
          <div class="angle angle-right-bottom"></div>
          <div style="padding: 25px 25px 0;">
            <div class="subTit"><img src="../../assets/icon/icon-license.png" width="28px" />项目区域情况</div>
          </div>
          <div id="myChart_3" :style="{width: '100%', height: '380px'}"></div>
          <div class="projectTable">
            <table class="table" style="height: 36px">
              <thead>
                <th>排名</th><th>所在区域</th><th>项目总数</th><th>在办项目数</th><th>办结项目数</th>
              </thead>
            </table>
            <table class="table" style="height: 230px;overflow: hidden;padding-top: 15px;">
               <!-- :style="{'marginTop': marginTop + 'px'}" -->
              <tbody class="messList1">
                <tr v-for="(item, index) in proAreasData" :key="index" v-if="index < 10">
                  <td style="width: 3%;"><div class="rank">{{ index + 1 }}</div></td>
                  <td style="width: 9%;">{{ item.name }}</td>
                  <td style="width: 9%;">{{ item.value }}</td>
                  <td style="width: 11%;">{{ item.doing }}</td>
                  <td style="width: 11%;">{{ item.done }}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <!-- <div class="panel-left-2 common-panpel">
          <div class="angle angle-left-top"></div>
          <div class="angle angle-left-bottom"></div>
          <div class="angle angle-right-top"></div>
          <div class="angle angle-right-bottom"></div>
          <div style="padding: 15px 25px;">
            <div class="subTit"><img src="../../assets/icon/icon-satisfaction.png" width="28px" />项目阶段评价最长用时</div>
            <div class="projectTimeSpentBox">
              <ul>
                <li v-for="(item, index) in proTimeSpentArr" :key="index">
                  <span class="tit">{{ item.name }}</span>
                  <div style="float: right;">
                    <span class="splitLine"></span>
                    <span class="time">{{ item.value }}</span>
                    <span class="unit">天</span>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div> -->
      </el-col>
      <el-col :span="10">
        <div class="panel-middle-1">
          <div class="item">
            <div class="tit">项目登记累计总数：</div>
            <ul class="ulBox">
              <li v-for="(item, index) in registerTotal" :key="index" style="background: #002870;" >{{ item }}</li>
            </ul>
            <span class="unit">个</span>
          </div>
          <div class="item">
            <div class="tit">项目累计总投资额：</div>
            <ul class="ulBox ulBox1">
              <li :style="item === '.' ? 'bakground: transparent' : 'background : #002870'" v-for="(item, index) in investmentTotal" :key="index">{{ item }}</li>
            </ul>
            <span class="unit">亿</span>
          </div>
        </div>
        <div class="panel-middle-2 common-panpel">
          <div class="angle angle-left-top"></div>
          <div class="angle angle-left-bottom"></div>
          <div class="angle angle-right-top"></div>
          <div class="angle angle-right-bottom"></div>
          <div>
            <div class="subTit" style="padding: 25px 25px 10px;"><img src="../../assets/icon/icon-satisfaction.png" width="28px" />项目重点情况</div>
            <div id="myChart_4" :style="{width: '100%', height: '300px'}"></div>
            <div class="titBox">
              <div class="tit">在办统计</div>
              <div class="tit">办结统计</div>
            </div>
          </div>
        </div>
        <div class="panel-middle-3 common-panpel">
          <div class="angle angle-left-top"></div>
          <div class="angle angle-left-bottom"></div>
          <div class="angle angle-right-top"></div>
          <div class="angle angle-right-bottom"></div>
          <div style="padding: 25px;">
            <div class="subTit"><img src="../../assets/icon/icon-satisfaction.png" width="28px" />项目公示</div>

            <div class="proPublicityTable">
              <table class="table" style="height: 36px">
                <thead>
                  <th style="width: 2%;">序号</th><th style="width: 18%;">项目名称</th><th style="width: 8%;">总投资额(万元)</th><th style="width: 5%;">开始时间</th>
                </thead>
              </table>
              <table class="table" style="height: 300px;overflow: hidden;padding-top: 20px;">
                <tbody class="messList">
                  <tr v-if="index < 10" v-for="(item, index) in proPublicityData" :key="index">
                    <td style="width: 2%;"><div class="rank">{{ index + 1 }}</div></td>
                    <td style="width: 21%;text-align: left;">{{ item.projectName }}</td>
                    <td style="width: 3%;text-align: right;padding-right: 30px;">{{ item.totalMoney }}</td>
                    <td style="width: 6%;">{{ item.registerTime }}</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="7">
        <div class="panel-right-1 common-panpel">
          <div class="angle angle-left-top"></div>
          <div class="angle angle-left-bottom"></div>
          <div class="angle angle-right-top"></div>
          <div class="angle angle-right-bottom"></div>
          <div style="padding: 25px">
            <div class="subTit"><img src="../../assets/icon/icon-reception.png" width="28px" />项目阶段情况分析</div>
            <div class="proStageBox">
              <div class="numBox">
                <div class="item item1 common-panpel">
                  <div class="angle insideAngle-left-top"></div>
                  <div class="angle insideAngle-left-bottom"></div>
                  <div class="angle insideAngle-right-top"></div>
                  <div class="angle insideAngle-right-bottom"></div>
                  <div class="num"><span class="num1">{{ doingTotal }}</span>个</div>
                  <div class="tit">在办项目总数</div>
                </div>
                <div class="item item2 common-panpel">
                  <div class="angle insideAngle-left-top"></div>
                  <div class="angle insideAngle-left-bottom"></div>
                  <div class="angle insideAngle-right-top"></div>
                  <div class="angle insideAngle-right-bottom"></div>
                  <div class="num"><span class="num2">{{ doneTotal }}</span>个</div>
                  <div class="tit">办结项目总数</div>
                </div>
                <div class="item item3 common-panpel">
                  <div class="angle insideAngle-left-top"></div>
                  <div class="angle insideAngle-left-bottom"></div>
                  <div class="angle insideAngle-right-top"></div>
                  <div class="angle insideAngle-right-bottom"></div>
                  <div class="num"><span class="num3">{{ doneRate }}</span>%</div>
                  <div class="tit">办结率</div>
                </div>
              </div>
              <div id="myChart_5" :style="{width: '100%', height: '380px'}"></div>
            </div>
          </div>
        </div>
        <div class="panel-right-2 common-panpel">
          <div class="angle angle-left-top"></div>
          <div class="angle angle-left-bottom"></div>
          <div class="angle angle-right-top"></div>
          <div class="angle angle-right-bottom"></div>
          <div style="padding: 25px;">
            <div class="subTit"><img src="../../assets/icon/icon-agesStatistics.png" width="28px" />阶段办件统计</div>
            <div id="myChart_6" :style="{width: '100%', height: '360px'}"></div>
          </div>
        </div>
      </el-col>
    </el-row>
  </el-col>
</template>

<script>
import 'echarts-liquidfill/src/liquidFill.js' // echarts水波图

export default {
  name: 'constructionProject',
  props: {
      widthCol: {
        type: Number,
        default: 12
      }
  },
  components: {
    // GovService
  },
  data () {
    return {
      marginTop: 0, // 数据的margin-top
      timer: '', // 定时器
      companyData: {},
      registerTotal: [], // 项目登记总数
      investmentTotal: [], // 项目投资总额
      // proTimeSpentArr: [], // 项目阶段评价最长用时
      cxcw: '', // 重新出文
      zjcw: '', // 追加出文
      hgcw: '', // 合格出文
      bhgcw: '', // 不合格出文
      zfcw: '', // 作废出文
      proAreasData: [], // 项目区域情况数据
      animate: false,
      series1: [], // 在办统计series1
      series2: [], // 在办统计series2
      series1_bjtj: [], // 办结统计series1
      series2_bjtj: [], // 办结统计series2
      doingTotal: '', // 项目阶段情况分析-在办项目总数
      doneTotal: '', // 项目阶段情况分析-办结项目总数
      doneRate: '', // 项目阶段情况分析-办结率
      series_projectStage: [], // 项目阶段情况分析饼图数据
      series_doning: [],
      series_done: [],
      series_revoke: [],
      proPublicityData: [], // 项目出示数据
    }
  },
  created() {
  },
  mounted() {
    this.getProPublicity() // 获取项目公示数据
    this.getProArea() // 获取项目区域情况数据
    this.getProTotal() // 获取项目总计数据
    this.getProImportant_zbtj() // 获取项目重点情况-在办统计数据
    this.getProImportant_bjtj() // 获取项目重点情况-办结统计数据
    // this.getProEvaluateTime() // 获取项目阶段评价最长用时数据
    this.getProStageAnalysis() // 获取项目阶段情况分析数据
    this.getStageBj() // 获取阶段办件统计数据
  },
  methods: {
    // 获取项目公示数据
    getProPublicity() {
      this.$http.get(window.SITE_CONFIG.apiURL + '/service692', {
        params: {
          fetchSize: 10
        }
      }).then(res => {
        let result = res.body.data
        this.proPublicityData = result
      }).catch(() => {})
    },
    // 获取项目区域情况数据
    getProArea() {
      this.$http.get(window.SITE_CONFIG.apiURL + '/service614', {
        params: {},
      }).then(res => {
        let result = res.body.data
        let arr = []
        result.map((item) => {
          let obj = {
            doing: item.doing,
            done: item.done,
            name: item.name,
            rate: item.rate,
            value: item.total
          }
          arr.push(obj)
        })
        this.proAreasData = arr

        this.render_projectArea()

      }).catch(() => {})
    },
    // 项目总计：项目登记总数/项目投资总额
    getProTotal() {
      this.$http.get(window.SITE_CONFIG.apiURL + '/service608', {
        params: {}
      }).then(res => {
        this.registerTotal = res.body.data.totalCounts.split('') // 项目登记总数
        this.investmentTotal = res.body.data.totalMoneys.split('') // 项目投资总额
      }).catch(() => {})
    },
    // 项目重点情况-在办统计
    getProImportant_zbtj() {
      this.$http.get(window.SITE_CONFIG.apiURL + '/service615', {
        params: {}
      }).then(res => {
        this.series1 = res.body.data.series1
        this.series2 = res.body.data.series2

        this.renderChart_zbtj()
      }).catch(() => {})
    },
    // 项目重点情况-办结统计
    getProImportant_bjtj() {
      this.$http.get(window.SITE_CONFIG.apiURL + '/service616', {
        params: {}
      }).then(res => {
        this.series1_bjtj = res.body.data.series1
        this.series2_bjtj = res.body.data.series2

        this.renderChart_zbtj()
      }).catch(() => {})
    },
    // 项目阶段评价最长用时
    // getProEvaluateTime() {
    //   this.$http.get(window.SITE_CONFIG.apiURL + '/service618', {
    //     params: {}
    //   }).then(res => {
    //     this.proTimeSpentArr = res.body.data
    //   }).catch(() => {})
    // },
    // 获取项目阶段情况分析数据
    getProStageAnalysis() {
      this.$http.get(window.SITE_CONFIG.apiURL + '/service609', {
        params: {}
      }).then(res => {
        this.doingTotal = res.body.data.doingTotal
        this.doneTotal = res.body.data.doneTotal
        this.doneRate = res.body.data.doneRate
        this.series_projectStage = res.body.data.datas

        this.render_projectStage()
      }).catch(() => {})
    },
    // 获取阶段办件统计数据
    getStageBj() {
      this.$http.get(window.SITE_CONFIG.apiURL + '/service612', {
        params: {}
      }).then(res => {
        let result = res.body.data
        let arr_doning = []
        let arr_done = []
        let arr_revoke = []
        result.map((item) => {
          arr_doning.push(item.data[0].value)
          arr_done.push(item.data[1].value)
          arr_revoke.push(item.data[2].value)
        })
        this.series_doing = arr_doning
        this.series_done = arr_done
        this.series_revoke = arr_revoke

        this.renderChart_stageBj()
      }).catch(() => {})
    },

    // 项目区域情况
    render_projectArea() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('myChart_3'))
      let option = {
        color: ['#00EAFF', '#FFD801', '#A9AFFF', '#009DE9', '#FF8A38', '#FAD972', '#C9DBFF', '#38DBB5', '#9299F3', '#FF803D', '#9DBDFF', '#006CFF', '#00FCFF', '#4BB9FF', '#F58381'],
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['25%', '50%'],
            center: ['50%', '50%'],
            roseType: 'area',
            data: this.proAreasData,
            label: {
              normal: {
                formatter: params => {
                  return (
                    params.name  + params.value + ' (' + params.percent.toFixed(0) + '%)'
                  )
                },
                fontSize: 19,
                fontWeight: 700,
                padding: [-20, -30, 0, -30],
              }
            }
          }
        ]
      }
      myChart.setOption(option)
    },
    // 项目重点情况
    renderChart_zbtj() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('myChart_4'))
      let option = {
        color: ['#6dd5b5', '#F96853', '#f5d981', '#46A6FF', '#aab0f9'],
        legend: {
          textStyle: {
            color: '#ffffff',
            fontSize: 24
          },
          icon: "roundRect", //  这个字段控制形状  类型包括 circle，rect ，roundRect，triangle，diamond，pin，arrow，none
          itemWidth: 17, // 设置宽度
          itemHeight: 7, // 设置高度
          itemGap: 15, // 设置间距
          data: ['一般', '重点', '省级以上重点', '市级重点', '区级重点']
        },
        series: [
          {
            name: '',
            type: 'pie',
            selectedMode: 'single',
            radius: [0, '30%'],
            center: ['30%', '58%'],
            label: {
              normal: {
                color: '#040F3E',
                position: 'inner',
                fontSize: 18,
                fontWeight: 700
              }
            },
            labelLine: {
              show: false
            },
            data: this.series1
          },
          {
            name: '',
            type: 'pie',
            radius: ['40%', '55%'],
            center: ['30%', '58%'],
            data: this.series2,
            label: {
              normal: {
                formatter: params => {
                  return (
                    params.name + '\n' + params.value + ' (' + params.percent.toFixed(0) + '%)'
                  )
                },
                fontSize: 20,
                color: '#fff',
                padding: [0, -5, 0, -30]
              }
            }
          },
          {
            name: '',
            type: 'pie',
            selectedMode: 'single',
            radius: [0, '30%'],
            center: ['75%', '58%'],
            label: {
              normal: {
                color: '#040F3E',
                position: 'inner',
                fontSize: 18,
                fontWeight: 700
              }
            },
            labelLine: {
              show: false
            },
            data: this.series1_bjtj
          },
          {
            name: '',
            type: 'pie',
            radius: ['40%', '55%'],
            center: ['75%', '58%'],
            data: this.series2_bjtj,
            label: {
              normal: {
                formatter: params => {
                  return (
                    params.name + '\n' + params.value + ' (' + params.percent.toFixed(0) + '%)'
                  )
                },
                fontSize: 20,
                color: '#fff',
                padding: [0, -5, 0, -30]
              }
            }
          }
        ]
      }
      myChart.setOption(option)
    },
    // 项目阶段情况分析
    render_projectStage() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('myChart_5'))
      let option = {
        color: ['#F98582', '#00EAFF', '#FEC500', '#43EA80'],
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['30%', '60%'],
            center: ['50%', '55%'],
            roseType: 'area',
            data: this.series_projectStage,
            label: {
              normal: {
                formatter: params => {
                  return (
                    params.name + '\n' + params.value + ' ' + params.percent.toFixed(0) + '%'
                  )
                },
                fontSize: 21,
                fontWeight: 700,
                padding: [0, -20, 0, -20],
              }
            }
          }
        ]
      }
      myChart.setOption(option)
    },
    // 阶段办件统计
    renderChart_stageBj() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('myChart_6'))
      let option = {
        legend: {
          data: ['在办件', '办结件', '撤件'],
          right: '0%',
          itemWidth: 17,
          itemHeight: 7,
          textStyle: {
            fontSize: 20,
            color: '#ffffff'
          }
        },
        grid: {
          top: '20%',
          left: '3%',
          right: '4%',
          bottom: '5%',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          data: ['立项用地规划许可', '工程建设许可', '施工许可', '竣工验收和备案'],
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            interval: 0,
            rotate: 0, // x轴文字倾斜 -25
            textStyle: {
              fontSize: 18,
              color: '#ffffff'
            },
            margin: 20,
            formatter:function(params) {
              var newParamsName = "";
              var paramsNameNumber = params.length;
              var provideNumber = 4;  //一行显示几个字
              var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
              if (paramsNameNumber > provideNumber) {
                  for (var p = 0; p < rowNumber; p++) {
                      var tempStr = "";
                      var start = p * provideNumber;
                      var end = start + provideNumber;
                      if (p == rowNumber - 1) {
                          tempStr = params.substring(start, paramsNameNumber);
                      } else {
                          tempStr = params.substring(start, end) + "\n";
                      }
                      newParamsName += tempStr;
                  }

              } else {
                  newParamsName = params;
              }
              return newParamsName
            },
          },
        }],
        yAxis: [{
          type: 'value',
          name: '办件总数（件）',
          nameTextStyle:{
            color: '#fff',
            fontSize: 20
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            textStyle: {
              fontSize: 20,
              color: '#ffffff'
            }
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(218, 219, 219, 0.1)'
            }
          },
        }],
        series: [
          {
            name: '在办件',
            type: 'bar',
            label: {
              show: true,
              position: 'top',
              textStyle: {
                color: '#fff',
                fontSize: 20
              }
            },
            data: this.series_doing,
            barWidth: '17.6px',
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#00F2FE' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: '#0088FF' // 100% 处的颜色
                }], false),
                barBorderRadius: [4, 4, 0, 0]
              }
            }
          },
          {
            name: '办结件',
            type: 'bar',
            label: {
              show: true,
              position: 'top',
              textStyle: {
                color: '#fff',
                fontSize: 20
              }
            },
            data: this.series_done,
            barWidth: '17.6px',
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#38F8D4' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: '#43EA80' // 100% 处的颜色
                }], false),
                barBorderRadius: [4, 4, 0, 0]
              }
            }
          },
          {
            name: '撤件',
            type: 'bar',
            label: {
              show: true,
              position: 'top',
              textStyle: {
                color: '#fff',
                fontSize: 20
              }
            },
            data: this.series_revoke,
            barWidth: '17.6px',
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#FB7099' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: '#FEDC45' // 100% 处的颜色
                }], false),
                barBorderRadius: [4, 4, 0, 0]
              }
            }
          }
        ]
      }
      myChart.setOption(option)
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.title {
  height: 103px;
  background: url('../../assets/background/bg_tit.png') no-repeat;
  font-size: 42px;
  font-weight: 700;
  text-align: center;
  margin: 0 0 35px 0;
  background-size: 100%;
  background-position-y: 25px;
}

.container-left {
  padding-right: 30px;

  .subTit {
    font-size: 29px;
    color: #00D2FF;
    font-weight: 600;

    img {
      position: relative;
      top: 3px;
      margin-right: 10px;
    }
  }

  .angle {
    position: absolute;
    width: 15px;
    height: 15px;
  }


  // 项目区域情况
  .panel-left-1 {
    border: 1px solid rgba(0, 255,255,0.1);
    margin-bottom: 15px;
    height: 1045px;

// .angle-left-top {
//       left: 0;
//       border-top: 1px solid #037C93;
//       border-left: 1px solid #037C93;
//     }

//     .angle-left-bottom {
//       top: 1030px;
//       left: 0;
//       border-bottom: 1px solid #037C93;
//       border-left: 1px solid #037C93;
//     }

//     .angle-right-top {
//       left: 559px;
//       border-top: 1px solid #037C93;
//       border-right: 1px solid #037C93;
//     }

//     .angle-right-bottom {
//       top: 1030px;
//       left: 557px;
//       border-right: 1px solid #037C93;
//       border-bottom: 1px solid #037C93;
//     }

    // .angle-left-top {
    //   left: 0;
    //   border-top: 1px solid #037C93;
    //   border-left: 1px solid #037C93;
    // }

    // .angle-left-bottom {
    //   top: 723px;
    //   left: 0;
    //   border-bottom: 1px solid #037C93;
    //   border-left: 1px solid #037C93;
    // }

    // .angle-right-top {
    //   left: 559px;
    //   border-top: 1px solid #037C93;
    //   border-right: 1px solid #037C93;
    // }

    // .angle-right-bottom {
    //   top: 723px;
    //   left: 559px;
    //   border-right: 1px solid #037C93;
    //   border-bottom: 1px solid #037C93;
    // }

    .projectTable {
      height: 583px;
      overflow: hidden;

      .table {
        width: 100%;
        border-spacing: 0;

        thead th {
          // background: #008AFF;
          font-size: 23px;
          // color: #04103E;
          color: #00D2FF;
          padding: 2px;
        }
        .messList1 {
          padding-top: 10px;
          height: 260px;
          overflow: hidden;
          line-height: 40px;
          // animation: myMove 15s linear infinite;
          // animation-fill-mode: forwards;
        }
        // @keyframes myMove {
        //   0% {
        //     transform: translateY(0);
        //   }
        //   100% {
        //     transform: translateY(-260px);
        //   }
        // }
        tbody tr td {
          text-align: center;
          font-size: 23px;
          padding: 7px 0;
          font-weight: bold;

          .rank {
            width: 27px;
            height: 27px;
            background: linear-gradient(0deg, #3551A4 0%, #2C8EC4 50%, #31CDB0 100%);
            border-radius: 50%;
            margin: 0 auto;
            font-size: 22px;
            color: #04103E;
            font-weight: 700;
            line-height: 30px;
          }
        }
      }
    }
  }

  // 项目阶段评价最长用时
  .panel-left-2 {
    border: 1px solid rgba(0, 255,255,0.1);
    height: 290px;
    margin-bottom: 15px;

    // .angle-left-top {
    //   left: 0;
    //   border-top: 1px solid #037C93;
    //   border-left: 1px solid #037C93;
    // }

    // .angle-left-bottom {
    //   left: 0;
    //   bottom: 15px;
    //   border-bottom: 1px solid #037C93;
    //   border-left: 1px solid #037C93;
    // }

    // .angle-right-top {
    //   left: 559px;
    //   border-top: 1px solid #037C93;
    //   border-right: 1px solid #037C93;
    // }

    // .angle-right-bottom {
    //   left: 559px;
    //   bottom: 15px;
    //   border-right: 1px solid #037C93;
    //   border-bottom: 1px solid #037C93;
    // }

    .projectTimeSpentBox {
      padding-top: 10px;
      position: relative;

      ul li {
        background: rgba(0, 198, 255, 0.05);
        padding: 0 20px;
        border-radius: 10px;
        margin-bottom: 12px;
        overflow: hidden;

        .tit {
          font-size: 22px;
          font-family: Source Han Sans CN;
          font-weight: 500;
          position: relative;
          top: 4px;
        }

        .splitLine {
          background: url('../../assets/icon/icon-line.png') no-repeat;
          background-position: right;
          width: 130px;
          height: 15px;
          display: inline-block;
          margin-right: 25px;
          position: absolute;
          right: 80px;
          margin-top: 12px;
        }

        .time {
          font-size: 32px;
          font-weight: 700;
          background: linear-gradient(0deg, #4FACFE 0%, #00F2FE 100%);
          -webkit-background-clip: text;
          color: transparent;
        }

        .unit {
          font-size: 22px;
          font-weight: 700;
        }
      }
    }
  }

  .panel-middle-1 {
    height: 152px;
    margin-bottom: 15px;
    display: flex;
    padding: 15px 25px;
    box-sizing: border-box;

    .item {
      flex: 1;

      .tit {
        font-weight: 700;
        font-size: 29px;
        margin-bottom: 15px;
      }

      .ulBox {
        float: left;
      }
      .ulBox li {
        display: inline-block;
        // background: #002870;
        margin-right: 5px;
        color: #00FF99;
        font-size: 36px;
        font-family: Source Han Sans CN;
        font-weight: bold;
        padding: 4px 0;
        width: 36px;
        text-align: center;
      }
      .unit {
        font-size: 29px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        position: relative;
        top: 9px;
      }

      .ulBox1 li {
        color: #FAB81E;
      }
    }
  }

  // 项目重点情况
  .panel-middle-2 {
    border: 1px solid rgba(0, 255,255,0.1);
    height: 430px;
    margin: 0 20px 15px;

    // .angle-left-top {
    //   top: 167px;
    //   left: 595px;
    //   border-top: 1px solid #037C93;
    //   border-left: 1px solid #037C93;
    // }

    // .angle-left-bottom {
    //   top: 583px;
    //   left: 595px;
    //   border-bottom: 1px solid #037C93;
    //   border-left: 1px solid #037C93;
    // }

    // .angle-right-top {
    //   top: 167px;
    //   left: 1359px;
    //   border-top: 1px solid #037C93;
    //   border-right: 1px solid #037C93;
    // }

    // .angle-right-bottom {
    //   top: 583px;
    //   left: 1359px;
    //   border-right: 1px solid #037C93;
    //   border-bottom: 1px solid #037C93;
    // }

    .titBox {
      text-align: center;
      display: flex;

      .tit {
        flex: 1;
        font-size: 24px;
        font-family: Source Han Sans CN;
        font-weight: bold;
      }
    }
  }

  // 项目出示
  .panel-middle-3 {
    border: 1px solid rgba(0, 255,255,0.1);
    height: 430px;
    margin: 0 20px;

    // .angle-left-top {
    //   left: 595px;
    //   bottom: 430px;
    //   border-top: 1px solid #037C93;
    //   border-left: 1px solid #037C93;
    // }

    // .angle-left-bottom {
    //   left: 595px;
    //   bottom: 15px;
    //   border-bottom: 1px solid #037C93;
    //   border-left: 1px solid #037C93;
    // }

    // .angle-right-top {
    //   left: 1359px;
    //   bottom: 430px;
    //   border-top: 1px solid #037C93;
    //   border-right: 1px solid #037C93;
    // }

    // .angle-right-bottom {
    //   left: 1359px;
    //   bottom: 15px;
    //   border-right: 1px solid #037C93;
    //   border-bottom: 1px solid #037C93;
    // }


    .proPublicityTable {
      height: 335px;
      overflow: hidden;
      margin-top: 15px;

      .table {
        width: 100%;
        border-spacing: 0;

        thead th {
          // background: #008AFF;
          // color: #04103E;
          font-size: 23px;
          color: #00D2FF;
          padding: 2px;
        }
        .messList {
          padding-top: 10px;
          height: 335px;
          overflow: hidden;
          animation: myMove1 18s linear infinite;
          animation-fill-mode: forwards;
        }
        @keyframes myMove1 {
          0% {
            transform: translateY(0);
          }
          100% {
            transform: translateY(-430px);
          }
        }
        tbody tr td {
          text-align: center;
          font-size: 22px;
          padding: 7px 0;
          font-weight: bold;

          .rank {
            width: 27px;
            height: 27px;
            background: linear-gradient(0deg, #3551A4 0%, #2C8EC4 50%, #31CDB0 100%);
            border-radius: 50%;
            margin: 0 auto;
            font-size: 22px;
            color: #04103E;
            font-weight: 700;
          }
        }
      }
    }
  }

  // 项目阶段情况分析
  .panel-right-1 {
    border: 1px solid rgba(0, 255,255,0.1);
    height: 595px;
    margin-bottom: 15px;

    // .angle-left-top {
    //   right: 559px;
    //   border-top: 1px solid #037C93;
    //   border-left: 1px solid #037C93;
    // }

    // .angle-left-bottom {
    //   top: 581px;
    //   right: 559px;
    //   border-bottom: 1px solid #037C93;
    //   border-left: 1px solid #037C93;
    // }

    // .angle-right-top {
    //   right: 0;
    //   border-top: 1px solid #037C93;
    //   border-right: 1px solid #037C93;
    // }

    // .angle-right-bottom {
    //   right: 0;
    //   top: 581px;
    //   border-right: 1px solid #037C93;
    //   border-bottom: 1px solid #037C93;
    // }

    .proStageBox {
      margin-top: 20px;
      .numBox {
        display: flex;
        .item {
          // padding-top: 20px;
          height: 114px;
          flex: 1;
          text-align: center;
          background: #041C51;
          margin-right: 10px;

          .num {
            font-size: 24px;
            font-family: Source Han Sans CN;
            font-weight: 500;
            margin-top: 12px;
            span {
              font-size: 36px;
              font-family: Source Han Sans CN;
              font-weight: bold;
            }
            .num1 {
              color: #91E7FF;
            }
            .num2 {
              color: #91FF96;
            }
            .num3 {
              color: #CA91FF;
            }
          }

          .tit {
            font-size: 24px;
            font-weight: bold;
          }
        }

        .item1 {
          // .insideAngle-left-top {
          //   border-top: 1px solid #037C93;
          //   border-left: 1px solid #037C93;
          // }

          // .insideAngle-left-bottom {
          //   top: 186px;
          //   border-bottom: 1px solid #037C93;
          //   border-left: 1px solid #037C93;
          // }

          .insideAngle-right-top {
            right: 384px;
            border-top: 1px solid #037C93;
            border-right: 1px solid #037C93;
          }

          .insideAngle-right-bottom {
            top: 186px;
            right: 384px;
            border-right: 1px solid #037C93;
            border-bottom: 1px solid #037C93;
          }
        }

        .item2 {
          // .insideAngle-left-top {
          //   border-top: 1px solid #037C93;
          //   border-left: 1px solid #037C93;
          // }

          // .insideAngle-left-bottom {
          //   top: 186px;
          //   border-bottom: 1px solid #037C93;
          //   border-left: 1px solid #037C93;
          // }

          .insideAngle-right-top {
            right: 210px;
            border-top: 1px solid #037C93;
            border-right: 1px solid #037C93;
          }

          .insideAngle-right-bottom {
            top: 186px;
            right: 210px;
            border-right: 1px solid #037C93;
            border-bottom: 1px solid #037C93;
          }
        }

        .item3 {
          // .insideAngle-left-top {
          //   border-top: 1px solid #037C93;
          //   border-left: 1px solid #037C93;
          // }

          // .insideAngle-left-bottom {
          //   top: 186px;
          //   border-bottom: 1px solid #037C93;
          //   border-left: 1px solid #037C93;
          // }

          // .insideAngle-right-top {
          //   right: 36px;
          //   border-top: 1px solid #037C93;
          //   border-right: 1px solid #037C93;
          // }

          // .insideAngle-right-bottom {
          //   top: 186px;
          //   right: 36px;
          //   border-right: 1px solid #037C93;
          //   border-bottom: 1px solid #037C93;
          // }
        }
      }
    }
  }

  .panel-right-2 {
    border: 1px solid rgba(0, 255,255,0.1);
    height: 432px;

    // .angle-left-top {
    //   right: 559px;
    //   border-top: 1px solid #037C93;
    //   border-left: 1px solid #037C93;
    // }

    // .angle-left-bottom {
    //   bottom: 15px;
    //   right: 559px;
    //   border-bottom: 1px solid #037C93;
    //   border-left: 1px solid #037C93;
    // }

    // .angle-right-top {
    //   right: 0;
    //   border-top: 1px solid #037C93;
    //   border-right: 1px solid #037C93;
    // }

    // .angle-right-bottom {
    //   bottom: 15px;
    //   right: 0;
    //   border-right: 1px solid #037C93;
    //   border-bottom: 1px solid #037C93;
    // }
  }

  .panel-right-3 {
    border: 1px solid rgba(0, 255,255,0.1);
    height: 390px;
    // padding: 25px;

    // .angle-left-top {
    //   right: 641px;
    //   border-top: 1px solid #037C93;
    //   border-left: 1px solid #037C93;
    // }

    // .angle-left-bottom {
    //   top: 1030px;
    //   right: 641px;
    //   border-bottom: 1px solid #037C93;
    //   border-left: 1px solid #037C93;
    // }

    // .angle-right-top {
    //   right: 0;
    //   border-top: 1px solid #037C93;
    //   border-right: 1px solid #037C93;
    // }

    // .angle-right-bottom {
    //   top: 1030px;
    //   right: 0;
    //   border-right: 1px solid #037C93;
    //   border-bottom: 1px solid #037C93;
    // }
  }
}
</style>
